<template>
  <div class="goods-list">
    <div v-for="(item,index) in fenleiList" :key="index"
    class="goods-waper"
    >
      <p class="goods-title">
        {{item.cat_name}}
      </p>
      <div v-for="(item1,index1) in item.children" :key="index1"
      class="goods-item"
      >
        <img :src="item1.cat_icon" alt="">
        <p>
          {{item1.cat_name}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"GoodsList",
  props:{
    fenleiList:Array
  },
  watch:{
    fenleiList(v1){
      console.log(v1)
    }
  }
}
</script>

<style lang='less' scoped>
  .goods-list{
    width: 100%;
    height: 100%;
    overflow: auto;
    .goods-waper{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .goods-title{
        width: 100%;
        line-height: 80px;
        text-align: center;
      }
      .goods-item{
        width: 30%;
        text-align: center;
        margin-bottom: 30px;
        img{
          width: 60%;
        }
        p{
          font-size: 12px;
        }
      }
    }
  }
</style>